<template>
  <hr />
  <h2 style="margin-left: 50px">修改离职信息</h2>
  <hr />
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="部门：" prop="departmentName">
      <el-select
        style="width: 180px"
        v-model="ruleForm.departmentName"
        placeholder="全部"
        clearable
        @change="bumen"
      >
        <el-option
          v-for="item in Department"
          :label="item.label"
          :value="item.value"
          :key="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="职位" prop="postsName" style="width: 280px">
      <el-select v-model="ruleForm.postsName" placeholder="请选择职位" @change="zhiwei">
        <el-option
          v-for="item in Position"
          :label="item.label"
          :value="item.value"
          :key="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="员工姓名" prop="employeeName" style="width: 400px">
      <el-select v-model="ruleForm.employeeName" placeholder="请选择姓名">
        <el-option
          v-for="item in tableEmployee"
          :label="item.employeeName"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="上级负责人" prop="superstratumCharge" style="width: 280px">
      <el-select v-model="ruleForm.superstratumCharge" placeholder="请选择上级负责人">
        <el-option v-for="item in tableUser" :label="item.name" :value="item.name" />
      </el-select>
    </el-form-item>
    <el-form-item label="入职日期:" prop="dateonBoard">
      <el-date-picker
        v-model="ruleForm.dateonBoard"
        type="date"
        placeholder="请选择入职日期"
        value-format="YYYY-MM-DD"
        clearable
      />
    </el-form-item>
    <el-form-item label="最后工作日期:" prop="lastDay">
      <el-date-picker
        v-model="ruleForm.lastDay"
        type="date"
        placeholder="请选择入职日期"
        value-format="YYYY-MM-DD"
        clearable
      />
    </el-form-item>
    <el-form-item label="离职原因:" prop="reasonforleaving">
      <el-input
        v-model="ruleForm.reasonforleaving"
        style="width: 240px"
        :rows="2"
        type="textarea"
        placeholder="请填写离职原因"
      />
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref,onMounted } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
const router=useRouter();
const route=useRoute();
onMounted(()=>{
  // GetemployeeName();
  GetResignModel();
  GetUser();
})
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    dimissionId:route.query.id,
  departmentName: "",
  postsName: "",
  employeeName: "",
  superstratumCharge: "",
  dateonBoard: "",
  lastDay: "",
  reasonforleaving: "",
  approvalDimission:"",
  firmId:"",
  userId:"",
  createName:"",
  createDate:""
})
const tableUser=ref([]);
const GetUser=()=>{
  axios({
    method:"get",
    url:"http://47.96.109.219:5202/api/User/UserSelectShow"
  })
  .then(res=>{
    tableUser.value=res.data.data
  })
}
const Department = ref([
    { label: 'CEO', value: 1 },
    { label: '财务部', value: 2 },
    { label: '运营部', value: 3 },
    { label: '人事部', value: 4 },
    { label: '策划部', value: 5 },
])

const Positions = ref([
    { label: '董事长', value: 1},
    { label: '财务部长', value: 2},
    { label: '运营部长', value: 3},
    { label: '人事部长', value: 4},
    { label: '策划部长', value: 5},
])
const Position:any=ref([]);
const bumen=(id:number)=>{
  Position.value = Positions.value.filter(positions => positions.value == id);
  const selectedPosition = Department.value.find(position => position.value === id);
    if (selectedPosition) {
      ruleForm.departmentName = selectedPosition.label;
    }
}
const zhiwei=(id:number)=>{
  const selectedPosition = Positions.value.find(position => position.value === id);
    if (selectedPosition) {
        ruleForm.postsName = selectedPosition.label;
    }
    GetemployeeName();
}
const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules>({
  employeeName: [
    {
      required: true,
      message: '请选择员工姓名',
      trigger: 'change',
    },
  ],
  departmentName: [
    {
      required: true,
      message: '请选择部门',
      trigger: 'change',
    },
  ],
  postsName: [
    {
      required: true,
      message: '请选择职位',
      trigger: 'change',
    },
  ],
  superstratumCharge: [
    {
      required: true,
      message: '请选择上级负责人',
      trigger: 'change',
    },
  ],
  dateonBoard: [
    { required: true, message: '入职日期为必填项', trigger: 'blur' },
  ],
  lastDay: [
    { required: true, message: '最后工作日期为必填项', trigger: 'blur' },
  ],
  reasonforleaving: [
    { required: true, message: '离职原因为必填项', trigger: 'blur' },
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(ruleForm)
      axios({
        method:"post",
        url:"empwrite/api/Resign/UpdateResgin",
        data:ruleForm
      })
      .then(res=>{
        if(res.data.data>0){
          ElMessage.success("修改成功")
          router.push("/ResignList")
        }
        else{
          ElMessage.error("修改失败")
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const tableEmployee:any=ref([]);
///员工姓名
const GetemployeeName=()=>{
  axios({
    method:"get",
    url:"empread/api/Employee/EmployeeshowResign",
    params:{
      postsId:ruleForm.postsName
    }
  })
  .then(res=>{
    tableEmployee.value=res.data.data
  })
}
const GetResignModel=()=>{
    axios({
        method:"get",
        url:"empread/api/Resign/GetDimissionModel",
        params:{
            id:ruleForm.dimissionId
        }
    })
    .then(res=>{
        ruleForm.departmentName=res.data.data.departmentName

        ruleForm.postsName=res.data.data.postsName
        GetemployeeName();
        ruleForm.employeeName=res.data.data.employeeName
        ruleForm.superstratumCharge=res.data.data.superstratumCharge
        ruleForm.dateonBoard=res.data.data.dateonBoard
        ruleForm.lastDay=res.data.data.lastDay
        ruleForm.reasonforleaving=res.data.data.reasonforleaving
        ruleForm.approvalDimission=res.data.data.approvalDimission
        ruleForm.firmId=res.data.data.firmId
        ruleForm.userId=res.data.data.userId
        ruleForm.createName=res.data.data.createName
        ruleForm.createDate=res.data.data.createDate
    })
}
</script>
